<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件的基本使用</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <button v-on:click="showInfo1">点我提示信息(不传参)</button>
      <!-- v-on:cilck 简写为 @click 常用 -->
      <!-- 为事件回调传递参数 -->
      <button @click="showInfo2(66,$event)">点我提示信息(传参)</button>
      <!-- $event 避免为回调函数传递参数而丢失 event -->
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data() {
        return {
          name: "b站",
        };
      },
      methods: {
        // methods中的方法存在于vm实例中
        showInfo1(event) {
          console.log(event.target.innerText);
          console.log(this === vm); // 此处的this为vm实例对象(除箭头函数)
          alert("同学你好!");
        },
        showInfo2(number, event) {
          console.log(event);
          alert(`同学你好!!${number}`);
        },
      },
    });
  </script>
</html>
